<template>
  <div style="padding-top:0px; border:1px">
    <baidu-map
      :v-bind:style="mapStyle"
      :center="center || center0"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      class="bm-view"
      ak="你的密钥"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom">
      <bm-control offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keywordpage" :sug-style="{zIndex: 999999}">
          <input type="text" placeholder="请输入搜索关键字" class="serachinput">
        </bm-auto-complete>
      </bm-control>
      <bm-view style="width: 100%; height:450px;"/>
      <bm-marker :position="{lng: lng, lat: lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"/>
      <bm-local-search :keyword="keywordpage" :auto-viewport="true"/>
    </baidu-map>
    <!--<div slot="footer" style="margin-top: 0px;">
      <Button
        type="ghost"
        style="width: 60px;height: 36px;"
        @click="cancel"
      >取消
      </Button>
      <Button type="primary" style="width: 60px;height: 36px;" @click="confirm">确定</Button>
    </div>-->
  </div>
</template>
<script>
import { BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker } from 'vue-baidu-map'
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
  },
  props: {
    center: {
      type: String,
      default: undefined
    },
    keyword: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: ''
    },
    mapHeight: {
      type: Number,
      default: 500
    }
  },
  data: function() {
    return {
      center0: '北京',
      lng: 0,
      lat: 0,
      showMapComponent: this.value,
      keywordpage: this.keyword,
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      zoom: 15
    }
  },
  watch: {
    value: function(currentValue) {
      if(currentValue){
        this.keywordpage = this.keyword
      }
    },
  },
  methods: {
    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      this.lng = e.point.lng
      this.lat = e.point.lat
      this.$emit('transfer', e.point)
    },
    syncCenterAndZoom(e) {
      this.zoom = e.target.getZoom()
    },
    /** *
     * 确认
     */
    confirm: function() {
      this.showMapComponent = false
      this.$emit('map-confirm', this.center)
    },
    /** *
     * 取消
     */
    cancel: function() {
      this.showMapComponent = false
      this.$emit('cancel', this.showMapComponent)
    }
  }
}
</script>

<style scoped>
  .serachinput{
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
</style>
